<!DOCTYPE html>
<html>
	<head>
		<title>WebVR Demo Room</title>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">

		<style>
			body {
				margin: 0;
			}

			button {
				position: absolute;
				bottom: 10px;
				right: 10px;
			}
		</style>
	</head>
	<body>

		<button id="startVR">Start VR</button>

		<script src="js/webvr-polyfill.js"></script>

		<script src="js/three.min.js"></script>
		<script src="js/VRControls.js"></script>
		<script src="js/VREffect.js"></script>
		<script src="js/OBJLoader.js"></script>
		<!-- <script src="js/AssimpJSONLoader.js"></script> -->
		<script>
			// WebVRConfig = {
			//   // Flag to disabled the UI in VR Mode.
			//   CARDBOARD_UI_DISABLED: false, // Default: false

			//   // Forces availability of VR mode, even for non-mobile devices.
			//   FORCE_ENABLE_VR: false, // Default: false.

			//   // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
			//   K_FILTER: 0.98, // Default: 0.98.

			//   // Flag to disable the instructions to rotate your device.
			//   ROTATE_INSTRUCTIONS_DISABLED: false, // Default: false.

			//   // How far into the future to predict during fast motion (in seconds).
			//   PREDICTION_TIME_S: 0.040, // Default: 0.040.

			//   // Flag to disable touch panner. In case you have your own touch controls.
			//   TOUCH_PANNER_DISABLED: false, // Default: true.

			//   // Enable yaw panning only, disabling roll and pitch. This can be useful
			//   // for panoramas with nothing interesting above or below.
			//   YAW_ONLY: true, // Default: false.

			//   // To disable keyboard and mouse controls, if you want to use your own
			//   // implementation.
			//   MOUSE_KEYBOARD_CONTROLS_DISABLED: false, // Default: false.

			//   // Prevent the polyfill from initializing immediately. Requires the app
			//   // to call InitializeWebVRPolyfill() before it can be used.
			//   DEFER_INITIALIZATION: false, // Default: false.

			//   // Enable the deprecated version of the API (navigator.getVRDevices).
			//   ENABLE_DEPRECATED_API: true, // Default: false.

			//   // Scales the recommended buffer size reported by WebVR, which can improve
			//   // performance.
			//   BUFFER_SCALE: 0, // Default: 0.5.

			//   // Allow VRDisplay.submitFrame to change gl bindings, which is more
			//   // efficient if the application code will re-bind its resources on the
			//   // next frame anyway. This has been seen to cause rendering glitches with
			//   // THREE.js.
			//   // Dirty bindings include: gl.FRAMEBUFFER_BINDING, gl.CURRENT_PROGRAM,
			//   // gl.ARRAY_BUFFER_BINDING, gl.ELEMENT_ARRAY_BUFFER_BINDING,
			//   // and gl.TEXTURE_BINDING_2D for texture unit 0.
			//   DIRTY_SUBMIT_FRAME_BINDINGS: false // Default: false.
			// }
		</script>
		<script>

			var scene, camera, renderer;
			var controls, effect;
			var vrDisplay;
		
			var numCubes = 100;	// Number of cubes in the scene
			var fieldRange = 1500; // The range in 3D space the cubes will be placed
			var cubes = []; // Array to hold cube meshes
			var seconds;
			// var wallRight;
			init();
			animate();

			function init() {
				colors = [
					{
						front: 0x1b85b8,
						back: 0x559e83,
						left: 0xae5a41,
						right: 0xc3cb71
					},
					{
						front: 0xb1ff80,
						back: 0x66ff4e,
						left: 0x5ec960,
						right: 0x41b03d
					},
					{
						front: 0xf1c40f,
						back: 0xe67e22,
						left: 0x3498db,
						right: 0xecf0f1
					}
				]
				var material, geometry, mesh;
				// This is your standard three.js set up
				// Create a scene, camera and a renderer
			    scene = new THREE.Scene();
			    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
			    renderer = new THREE.WebGLRenderer({ antialias: true });
			    renderer.physicallyCorrectLights = true;
					renderer.gammaInput = true;
					// renderer.antialias = true;
					renderer.gammaOutput = true;
					renderer.shadowMap.enabled = true;
					renderer.toneMapping = THREE.ReinhardToneMapping;
					renderer.toneMappingExposure = Math.pow( 1, 5.0 ); // to allow for very bright scenes.
					renderer.setPixelRatio( window.devicePixelRatio );
					renderer.setSize( window.innerWidth, window.innerHeight );
			    document.body.appendChild( renderer.domElement );

			    // Set VR controls
			    controls = new THREE.VRControls( camera );

			    // Apply VR stereo rendering to renderer.
				effect = new THREE.VREffect(renderer);
				effect.setSize(window.innerWidth, window.innerHeight);

				// Look for available VR devices
				navigator.getVRDisplays().then(function(displays) {
  					if (displays.length > 0) {
  						// set vrDisplay variable as the first device
					    vrDisplay = displays[0];
					 }	
				});

			  var bulbBoxGeometry = new THREE.BoxGeometry( 8, 0.5, 0.002 );
				bulbLight1 = new THREE.PointLight( 0xffee88, 1, 100, 2 );

				bulbMat = new THREE.MeshStandardMaterial( {
					emissive: 0xffffee,
					emissiveIntensity: 1,
					color: 0x000000
				});
				bulbLight1.add( new THREE.Mesh( bulbBoxGeometry, bulbMat ) );
				bulbLight1.position.set( 0, 4.5, -15 );
				bulbLight1.castShadow = true;
				bulbLight1.power = 3500;
				scene.add( bulbLight1 );

				bulbLight2 = new THREE.PointLight( 0xffee88, 1, 100, 2 );

				bulbLight2.add( new THREE.Mesh( bulbBoxGeometry, bulbMat ) );
				bulbLight2.position.set( 0, 4.5, 15 );
				bulbLight2.castShadow = true;
				bulbLight2.power = 3500;
				// bulbLight2.rotation.y = Math.PI / 2.0;

				scene.add( bulbLight2 );

				bulbMat.emissiveIntensity = bulbLight1.intensity / Math.pow( 0.05, 2.0 ); // convert from intensity to irradiance at bulb surface
				bulbMat.emissiveIntensity = bulbLight2.intensity / Math.pow( 0.05, 2.0 ); // convert from intensity to irradiance at bulb surface
				

				hemiLight = new THREE.HemisphereLight( 0xddeeff, 0x0f0e0d, 0.02 );
				scene.add( hemiLight );

				floorMat = new THREE.MeshStandardMaterial( {
					roughness: 0.8,
					color: 0xffffff,
					metalness: 0.2,
					bumpScale: 0.0005
				});

				// var diffuseColor = new THREE.Color().setHSL( alpha, 0.5, 0.5 );
				var diffuseColor = new THREE.Color().setHex( 0x3498db );

				wallFront = new THREE.MeshStandardMaterial( {
					roughness: 0.7,
					color: diffuseColor,
					// metalness: 0.2,
					// bumpScale: 0.0005
				});

				wallRight = new THREE.MeshStandardMaterial( {
					roughness: 0.7,
					color: new THREE.Color().setHex( 0xf1c40f ),
					// metalness: 0.2,
					// bumpScale: 0.0005
				});

				wallBack = new THREE.MeshStandardMaterial( {
					roughness: 0.7,
					color: new THREE.Color().setHex( 0xe67e22 ),
					// metalness: 0.2,
					// bumpScale: 0.0005
				});

				wallLeft = new THREE.MeshStandardMaterial( {
					roughness: 0.7,
					color: new THREE.Color().setHex( 0x3498db ),
					// metalness: 0.2,
					// bumpScale: 0.0005
				});

				ceilingMat = new THREE.MeshStandardMaterial( {
					roughness: 0.7,
					color: new THREE.Color().setHex( 0xe4edfd ),
					// metalness: 0.2,
					// bumpScale: 0.0005
				});

				var textureLoader = new THREE.TextureLoader();
				textureLoader.load( "textures/hardwood2_diffuse.jpg", function( map ) {
					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.set( 5*2/3, 12*2/3 );
					floorMat.map = map;
					floorMat.needsUpdate = true;
				} );
				textureLoader.load( "textures/hardwood2_bump.jpg", function( map ) {
					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.set( 5*2/3, 12*2/3 );
					floorMat.bumpMap = map;
					floorMat.needsUpdate = true;
				} );
				textureLoader.load( "textures/hardwood2_roughness.jpg", function( map ) {
					map.wrapS = THREE.RepeatWrapping;
					map.wrapT = THREE.RepeatWrapping;
					map.anisotropy = 4;
					map.repeat.set( 5*2/3, 12*2/3 );
					floorMat.roughnessMap = map;
					floorMat.needsUpdate = true;
				} );

				

				var floorGeometry = new THREE.PlaneBufferGeometry( 40, 40 );
				var floorMesh = new THREE.Mesh( floorGeometry, floorMat );
				floorMesh.receiveShadow = true;
				floorMesh.position.set( 0, -7.5, 0);
				floorMesh.rotation.x = -Math.PI / 2.0;
				scene.add( floorMesh );

				var ceilingGeometry = new THREE.PlaneBufferGeometry( 40, 40 );
				var ceilingMesh = new THREE.Mesh( ceilingGeometry, ceilingMat );
				ceilingMesh.receiveShadow = true;
				ceilingMesh.position.set( 0, 7.5, 0);
				ceilingMesh.rotation.x = Math.PI / 2.0;
				scene.add( ceilingMesh );


				var wallGeometry = new THREE.PlaneBufferGeometry( 40, 15);
				var wallMesh1 = new THREE.Mesh( wallGeometry, wallFront );
				wallMesh1.receiveShadow = true;
				wallMesh1.position.set( 0, 0, -20 );
				// wallMesh1.rotation.x = -Math.PI / 2.0;
				// wallMesh1.rotation.y = -Math.PI / 2.0;
				// wallMesh1.rotation.z = -Math.PI / 2.0;
				scene.add( wallMesh1 );

				var wallGeometry = new THREE.PlaneBufferGeometry( 40, 15 );
				var wallMesh2 = new THREE.Mesh( wallGeometry, wallRight );
				wallMesh2.receiveShadow = true;
				wallMesh2.position.set( 20, 0, 0 );
				// wallMesh2.rotation.x = -Math.PI / 2.0;
				wallMesh2.rotation.y = -Math.PI / 2.0;
				// wallMesh2.rotation.z = -Math.PI / 2.0;
				scene.add( wallMesh2 );

				var wallGeometry = new THREE.PlaneBufferGeometry( 40, 15 );
				var wallMesh3 = new THREE.Mesh( wallGeometry, wallBack );
				wallMesh3.receiveShadow = true;
				wallMesh3.position.set( 0, 0, 20 );
				// wallMesh3.rotation.x = -Math.PI / 2.0;
				wallMesh3.rotation.y = -Math.PI;
				// wallMesh3.rotation.z = -Math.PI / 2.0;
				scene.add( wallMesh3 );
				
				var wallGeometry = new THREE.PlaneBufferGeometry( 40, 15 );
				var wallMesh4 = new THREE.Mesh( wallGeometry, wallLeft );
				wallMesh4.receiveShadow = true;
				wallMesh4.position.set( -20, 0, 0 );
				// wallMesh4.rotation.x = -Math.PI / 2.0;
				wallMesh4.rotation.y = Math.PI / 2.0;
				// wallMesh4.rotation.z = -Math.PI / 2.0;
				scene.add( wallMesh4 );
				var colorCounter = 0;
				var current;
				setInterval(function() {
					wallRight.color = new THREE.Color( colors[colorCounter].right );
					wallLeft.color = new THREE.Color( colors[colorCounter].left );
					wallFront.color = new THREE.Color( colors[colorCounter].front );
					wallBack.color = new THREE.Color( colors[colorCounter].back );
					colorCounter++;
					if (colorCounter % colors.length == 0) {
						colorCounter = 0;
					}
				}, 5 * 1000);

				// BEGIN Clara.io JSON loader code
				var objectLoader = new THREE.ObjectLoader();

				objectLoader.load("models/json/chair.json", function ( chair ) {
					chair.scale.x = chair.scale.y = chair.scale.z = 0.08;
				 	// var chair2 = chair.clone();
					chair.position.set(0, -7.5, -18);
					chair.rotation.y = 160 * Math.PI / 180;
					// chair.rotation.y = Math.PI / 2;
				 	scene.add( chair );
				 // 	chair2.position.set(12, -7.5, 6);
					// chair2.rotation.y = 50 * Math.PI / 180;
					// // chair2.rotation.y = Math.PI / 2;
				 // 	scene.add( chair2 );
				} );

				objectLoader.load("models/json/atelier-pfister-riom-sofa.json", function ( sofa ) {
					sofa.scale.x = sofa.scale.y = sofa.scale.z = 0.5;
					sofa.position.set(-15.5, -6.5, -15.5);
					// sofa.rotation.y = 70 * Math.PI / 180;
					sofa.rotation.y = Math.PI;
				 	scene.add( sofa );
				} );

			}

		
			// Standard way to run an animation in JS
			// Using requestAnimationFrame
			function animate() {

			    requestAnimationFrame( animate );
			    

			    // Controls need updating every frame
			    controls.update();

			    // Render the scene
			    effect.render( scene, camera );

			}

			// Resize the renderer canvas
			function onResize() {
			  effect.setSize(window.innerWidth, window.innerHeight);
			  camera.aspect = window.innerWidth / window.innerHeight;
			  camera.updateProjectionMatrix();
			}

			// Start the VR if button is clicked
			document.querySelector('#startVR').addEventListener('click', function() {
			  vrDisplay.requestPresent([{source: renderer.domElement}]);
			});

			// Resize the renderer canvas when going in or out of VR mode
			window.addEventListener('vrdisplaypresentchange', onResize);

			// Resize the renderer canvas if the browser window size changes
			window.addEventListener('resize', onResize);

			

		</script>

	</body>

</html>